<template>
	<div class="resident-archive-page">
		<div class="page-header">
			<span class="header-line"></span>
			<h3>新建居民档案</h3>
		</div>
		<div class="divider"></div>
		<div class="form-container">
			<h4>居民信息</h4>
			<el-form :model="residentForm" label-width="80px">
				<el-row>
					<el-col :span="8">
						<el-form-item label="姓名">
							<el-input v-model="residentForm.residentName" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="身份证号">
							<el-input v-model="residentForm.residentIdCard" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="性别">
							<el-select v-model="residentForm.residentGender" placeholder="请选择">
								<el-option label="男" value="男"></el-option>
								<el-option label="女" value="女"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="出生年月">
							<el-date-picker v-model="residentForm.residentBirthDate" type="date" placeholder="请选择日期"
								format="yyyy-MM-dd" value-format="yyyy-MM-dd"
								:picker-options="pickerOptions"></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="手机号码">
							<el-input v-model="residentForm.residentPhone" placeholder="居民登录账号，请正确填写"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="现居地">
							<el-input v-model="residentForm.residentAddress" placeholder="请输入"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8">
						<el-form-item label="居民标签">
							<el-select v-model="residentForm.residentTags" multiple placeholder="请选择">
								<el-option label="高血压" value="1"></el-option>
								<el-option label="糖尿病" value="2"></el-option>
								<el-option label="老年人" value="3"></el-option>
								<el-option label="儿童" value="4"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="家庭成员">
							<el-button type="text" @click="associateFamilyMember()" class="add-member-btn">
								<i class="el-icon-plus"></i> 关联家庭成员
							</el-button>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="登录密码">
							<el-input v-model="residentForm.residentPassword" type="password"
								placeholder="8位以上的数字和字母组合"></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 已关联家庭成员展示区域（水平对齐版） -->
				<el-row v-if="residentForm.familyMember.length > 0" class="family-members-section">
					<el-col>
						<el-form-item label="已关联成员" label-width="100px" class="family-members-item">
							<!-- 使用Flex布局使标题和卡片在同一行 -->
							<div class="family-line-container">
								<!-- 成员卡片容器 -->
								<div class="family-members-container">
									<div v-for="(member, index) in residentForm.familyMember"
										:key="member.residentFamilyId" class="family-member-card"
										:style="{ animationDelay: `${index * 0.1}s` }">
										<div class="member-info">
											<div class="member-name">
												{{ member.memberName }}
											</div>
											<el-tag type="info"
												class="relation-tag">{{ member.familyRelation }}</el-tag>
										</div>
										<el-button type="text" icon="el-icon-delete" @click="removeFamilyMember(index)"
											class="delete-btn"></el-button>
									</div>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>

				<div class="divider"></div>
				<el-form-item>
					<el-button type="primary" @click="save()">保存</el-button>
					<el-button type="primary" @click="improveResidentFile()">完善居民档案</el-button>
					<el-button @click="goBack()">返回</el-button>
				</el-form-item>
			</el-form>
		</div>

		<!-- 关联家庭成员弹窗 -->
		<el-dialog title="关联家庭成员" :visible.sync="familyDialogVisible" width="500px">
			<el-form :model="form" label-width="80px">
				<el-form-item label="选择成员" required>
					<el-select v-model="selectedMember" filterable remote :remote-method="remoteSearch"
						placeholder="请输入姓名搜索居民" :loading="searchLoading" style="width: 100%;">
						<el-option v-for="member in memberOptions" :key="member.residentId" :label="member.residentName"
							:value="member"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择关系" required>
					<el-select v-model="selectedRelation" placeholder="请选择与居民的关系" style="width: 100%;">
						<el-option label="父亲" value="父亲"></el-option>
						<el-option label="母亲" value="母亲"></el-option>
						<el-option label="儿子" value="儿子"></el-option>
						<el-option label="女儿" value="女儿"></el-option>
						<el-option label="配偶" value="配偶"></el-option>
						<el-option label="祖父" value="祖父"></el-option>
						<el-option label="祖母" value="祖母"></el-option>
						<el-option label="其他" value="其他"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeFamilyDialog">取消</el-button>
				<el-button type="primary" @click="confirmFamilyDialog">确定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		data() {
			return {
				residentForm: {
					residentNumber: null,
					residentName: null,
					residentIdCard: null,
					residentPhone: null,
					residentAddress: null,
					residentPassword: null,
					residentGender: null,
					residentBirthDate: null,
					residentTags: [],
					familyMember: [] // 存储已关联的家庭成员
				},
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				// 家庭成员弹窗相关
				familyDialogVisible: false,
				selectedMember: null,
				selectedRelation: '',
				memberOptions: [],
				searchLoading: false,
				form: {},
			};
		},
		methods: {
			save() {
				axios.post("/api/resident/addHalfResident",this.residentForm).then(resp=>{
					if(resp.data.code == 200){
						this.$message.success('保存成功');
						this.residentForm = {}
					}
				})
			},

			improveResidentFile() {
				console.log('完善居民档案');
				this.$router.push('/allUserInfo');
			},

			goBack() {
				this.$router.back();
			},

			// 打开关联家庭成员弹窗
			associateFamilyMember() {
				this.familyDialogVisible = true;
				this.selectedMember = null;
				this.selectedRelation = '';
				this.memberOptions = [];
			},

			// 关闭弹窗
			closeFamilyDialog() {
				this.familyDialogVisible = false;
			},

			// 确认添加家庭成员
			confirmFamilyDialog() {
				if (!this.selectedMember) {
					this.$message.warning('请选择家庭成员');
					return;
				}

				if (!this.selectedRelation) {
					this.$message.warning('请选择成员关系');
					return;
				}

				// 检查是否已添加该成员
				const isDuplicate = this.residentForm.familyMember.some(
					member => member.residentFamilyId === this.selectedMember.residentId
				);

				if (isDuplicate) {
					this.$message.warning('该成员已添加，请勿重复添加');
					return;
				}

				// 添加到家庭成员列表
				this.residentForm.familyMember.push({
					residentFamilyId: this.selectedMember.residentId,
					memberName: this.selectedMember.residentName,
					familyRelation: this.selectedRelation
				});

				this.$message.success('家庭成员关联成功');
				this.familyDialogVisible = false;
			},

			// 前端本地搜索居民
			remoteSearch(query) {
				if (!query || query.length < 1) {
					this.memberOptions = [];
					return;
				}

				this.searchLoading = true;

				axios.get("/api/resident/findResidentName?name="+query).then(resp=>{
					this.memberOptions =  resp.data.data
					this.searchLoading = false;
				})
				// 模拟网络请求延迟
				/* setTimeout(() => {
					this.memberOptions = this.localResidents.filter(member =>
						member.residentName.includes(query)
					);
					this.searchLoading = false;
				}, 300); */
			},

			// 删除家庭成员
			removeFamilyMember(index) {
				this.$confirm('确定要删除该家庭成员关联吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.residentForm.familyMember.splice(index, 1);
					this.$message.success('删除成功');
				}).catch(() => {
					// 取消删除
				});
			}
		}
	};
</script>

<style scoped>
	.resident-archive-page {
		width: 1150px;
		margin: 20px auto;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	.page-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.header-line {
		display: inline-block;
		width: 6px;
		height: 24px;
		background-color: #20a0ff;
		margin-right: 8px;
		border-radius: 3px;
	}

	.divider {
		height: 1px;
		background-color: #e4e7ed;
		margin: 20px 0;
	}

	.form-container h4 {
		margin-bottom: 20px;
		font-weight: 600;
		color: #1f2d3d;
	}

	.el-form-item {
		margin-bottom: 15px;
	}

	.el-input,
	.el-select,
	.el-date-picker {
		width: 200px;
	}

	/* 按钮样式 */
	.el-button+.el-button {
		margin-left: 10px;
	}

	/* 添加家庭成员按钮样式 */
	.add-member-btn {
		color: #20a0ff !important;
		padding-left: 0;
	}

	.add-member-btn:hover {
		color: #409eff !important;
	}

	/* 家庭成员展示区域样式 - 水平对齐关键样式 */
	.family-members-section {
		margin-top: 10px;
		animation: fadeIn 0.5s ease;
	}
	
	.family-members-item{
		align-items: left;
	}

	/* 关键：使用Flex布局使标题和卡片在同一行并垂直居中，且整体靠左对齐 */
	.family-line-container {
		display: flex;
		align-items: center;
		/* 垂直居中对齐 */
		flex-wrap: wrap;
		/* 超出宽度时自动换行 */
		gap: 10px;
		/* 标题与卡片之间的间距 */
		width: 100%;
		/* 新增：让整个容器内容靠左对齐 */
		justify-content: flex-start;
	}

	/* 已关联成员标题样式 */
	.family-title {
		font-size: 14px;
		color: #606266;
		font-weight: 500;
		min-width: 80px;
		/* 确保标题宽度固定 */
	}

	/* 成员卡片容器 */
	.family-members-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		flex: 1;
		justify-content: flex-start;
	}

	/* 成员卡片样式 */
	.family-member-card {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		border: 1px solid #e4e7ed;
		border-radius: 6px;
		padding: 8px 12px;
		min-width: 180px;
		transition: all 0.3s ease;
		animation: slideUp 0.4s ease forwards;
		opacity: 0;
		transform: translateY(10px);
	}

	.family-member-card:hover {
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
		border-color: #c0ccda;
		transform: translateY(-2px);
	}

	.member-info {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.member-name {
		font-size: 15px;
		color: #1f2d3d;
	}

	.relation-tag {
		font-size: 12px;
		padding: 2px 6px;
	}

	.delete-btn {
		color: #f56c6c !important;
		opacity: 0.7;
		transition: all 0.2s ease;
		padding: 0 5px;
	}

	.delete-btn:hover {
		opacity: 1;
		background-color: rgba(245, 108, 108, 0.1);
	}

	/* 动画效果 */
	@keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes slideUp {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 响应式调整 */
	@media (max-width: 1200px) {
		.resident-archive-page {
			width: 95%;
		}
	}
</style>